<template>
    <view>
        <!-- subpackage/orderDetail/orderDetail.wxml -->
        <!-- 自定义导航栏 -->
        <custom-navbar title="订单详情" backgroundColor="#ffffff" textColor="#000" :showBack="true" :isHomePage="false"></custom-navbar>
        <view class="orderDetail" :style="'height: calc(100vh - ' + navHeight + 'px - 172rpx);'">
            <view class="orderDetail_status">
                <image src="https://image.shengxuankj.com/fronts/order_status_BG.png" mode="" />
                <view class="orderDetail_status_container">
                    <view class="orderDetail_status_container_info">
                        <text class="status">待支付</text>
                        <!-- <text class="time">剩余12:26分钟</text> -->
                    </view>
                    <view class="orderDetail_status_container_tips"></view>
                </view>
            </view>
            <view class="orderDetail_info">
                <view class="orderDetail_info_left">
                    <image src="https://image.shengxuankj.com/fronts/roomList01.png" mode="" />
                </view>
                <view class="orderDetail_info_right">
                    <view class="orderDetail_info_right_title">{{ orderData.roomInfo.name }}</view>
                    <view class="orderDetail_info_right_tips">{{ getJsonnToArrayText(orderData.roomInfo.config) }}</view>
                    <view class="orderDetail_info_right_tips">{{ orderData.start_date }}入住 {{ orderData.end_date }}离店</view>
                </view>
            </view>
            <view class="orderDetail_pay">
                <text>在线支付</text>
                <text>￥ {{ orderData.order_amount }}</text>
            </view>
            <view class="orderDetail_orderInfo">
                <view class="orderDetail_orderInfo_item">
                    <text>订单编号</text>
                    <text>{{ orderData.sn }}</text>
                </view>
                <view class="orderDetail_orderInfo_item">
                    <text>联系人</text>
                    <text>{{ orderData.name }}</text>
                </view>
                <view class="orderDetail_orderInfo_item">
                    <text>联系电话</text>
                    <text>{{ orderData.phone }}</text>
                </view>
            </view>
            <view class="orderDetail_view">
                <view class="orderDetail_view_title">其他</view>
                <view class="orderDetail_view_item">
                    <text>订单编号</text>
                    <text>{{ orderData.sn }}</text>
                </view>
                <view class="orderDetail_view_item">
                    <text>创建时间</text>
                    <text>{{ orderData.create_time }}</text>
                </view>
            </view>
            <view class="orderDetail_footer" v-if="orderData.return_status != 1 && orderData.is_used != 1">
                <view class="orderDetail_footer_left" v-if="orderData.pay_status == 0">
                    <!-- <text class="more" @tap="openMore">更多</text> -->
                    <up-button color="#999999" round custom-class="btn" @tap.native="cancelOrder" plain v-if="orderData.pay_status == 0">取消订单</up-button>
                    <up-button color="#999999" round custom-class="btn" @tap.native="cancelOrder" plain v-if="orderData.pay_status == 1 && orderData.is_used == 0 && orderData.return_status == 0">退款</up-button>
                </view>
                <view class="orderDetail_footer_right" v-if="orderData.pay_status == 0">
                    <up-button color="rgba(57, 97, 54, 1)" round custom-class="btn" @tap.native="goToPayPage" v-if="orderData.pay_status == 0">立即支付</up-button>
                </view>
            </view>
        </view>
        <up-action-sheet
            :show="show"
            :actions="actions"
            cancel-text="取消"
            :close-on-click-overlay="true"
            :close-on-click-action="true"
            :safe-area-inset-bottom="true"
            :root-portal="true"
            :overlay="true"
            @close="close"
            @cancel="close"
            @click-overlay="close"
            @select="selectFun"
        />
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import customNavbar from '../../components/custom-navbar/index.vue'
import { orderDetailFun, orderCancelFun, payFun } from '@/api/port'
// 接口定义
interface Action {
  name: string
}

interface SelectEvent {
  detail: any
}

// 响应式数据
const show = ref<boolean>(false)
const actions = ref<Action[]>([
  {
    name: '选项'
  },
  {
    name: '选项'
  }
])
const navHeight = ref<number>(uni.getStorageSync('navHeight') ? uni.getStorageSync('navHeight') : 88)

// 方法定义
const openMore = (): void => {
  show.value = true
}

const close = (): void => {
  show.value = false
}

const selectFun = (event: SelectEvent): void => {
  console.log(event.detail)
  close()
}

const cancelOrder = async (): Promise<void> => {
    uni.showModal({
        title: '提示',
        content: '确定要取消订单吗？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    const result = await orderCancelFun({ order_id: order_id.value })
                    if (result.code === 1) {
                        uni.showToast({
                            title: '订单已取消',
                            icon: 'success'
                        })
                        uni.navigateBack({
                            delta: 1
                        })
                    } else {
                        uni.showToast({
                            title: result.msg || '取消失败',
                            icon: 'error'
                        })
                    }
                } catch (error) {
                    uni.showToast({
                        title: '网络异常',
                        icon: 'error'
                    })
                }
            }
        }
    })
}

const goToPayPage = (): void => {
  console.log('占位：函数 goToPayPage 未声明')
  requestWeChatPay()

}
// 调用微信支付
const requestWeChatPay = async (): Promise<any> => {
    try {
        // 这里应该调用后端API获取支付参数
        // 模拟获取支付参数
        const res = await payFun({ order_id: order_id.value, from: 'order', pay_way: '2' })
        console.log('res', res)
        const paymentParams: PaymentParams = {
            timeStamp: res.data.config.timeStamp,
            nonceStr: res.data.config.nonceStr,
            package: res.data.config.package,
            signType: res.data.config.signType,
            paySign: res.data.config.paySign
        }

        // 调用微信支付API
        return new Promise((resolve, reject) => {
            uni.requestPayment({
                ...paymentParams,
                success: (res: any) => {
                    console.log('支付成功:', res)
                    resolve(res)
                },
                fail: (err: any) => {
                    console.error('支付失败:', err)
                    if (err.errMsg === 'requestPayment:fail cancel') {
                        reject(new Error('用户取消支付'))
                    } else {
                        reject(new Error('支付失败: ' + err.errMsg))
                    }
                }
            })
        })
    } catch (error) {
        console.log('CatchClause', error)
        console.error('请求支付失败:', error)
        throw error
    }
}

const order_id = ref<any>()
const orderData = ref<any>()
const getOrderDetail = async (): Promise<void> => {
  let res = await orderDetailFun({
    id: order_id.value
  })
  if (res.code === 1) {
    orderData.value = res.data
  }
}

const getJsonnToArrayText = (json: any) => {
    let arr: any = []
    console.log(json)
    let config = JSON.parse(JSON.parse(json))
    console.log(config)
    config.forEach((item: any) => {
        arr.push(item.text)
    })
    return arr.join('·')
}


onLoad(async (options)=>{
    order_id.value = options.id
    await getOrderDetail()
})
</script>
<style>
/* subpackage/orderDetail/orderDetail.wxss */

.orderDetail {
    width: 100%;
    background-color: #f5f5f5;
}
.orderDetail .orderDetail_status {
    width: 100%;
    position: relative;
}
.orderDetail_status image {
    width: 100%;
    height: 206rpx;
}
.orderDetail_status_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    padding: 30rpx;
    box-sizing: border-box;
}
.orderDetail_status_container .orderDetail_status_container_info {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}
.orderDetail_status_container_info text:nth-child(1) {
    /** 文本1 */
    font-size: 40rpx;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 57.92rpx;
    color: rgba(43, 48, 43, 1);
}
.orderDetail_status_container_info text:nth-child(2) {
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 57.92rpx;
    color: rgba(255, 141, 26, 1);
    margin-left: 24rpx;
}
.orderDetail_status_container_tips {
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 32rpx;
    color: rgba(85, 85, 85, 1);
    margin-top: 10rpx;
}

.orderDetail_info {
    width: calc(100% - 60rpx);
    height: 218rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 25rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 30rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
}
.orderDetail_info .orderDetail_info_left {
    width: 194rpx;
    height: 168rpx;
}
.orderDetail_info_left image {
    width: 100%;
    height: 100%;
}
.orderDetail_info_right {
    width: calc(100% - 194rpx - 24rpx);
    height: 100%;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.orderDetail_info_right .orderDetail_info_right_title {
    /** 文本1 */
    font-size: 28rpx;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 37.13rpx;
    color: rgba(19, 19, 19, 1);
    margin-bottom: 20rpx;
}
.orderDetail_info_right .orderDetail_info_right_tips {
    /** 文本1 */
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 31.82rpx;
    color: rgba(19, 19, 19, 0.6);
    margin-bottom: 6rpx;
}

.orderDetail_pay {
    width: calc(100% - 60rpx);
    margin: 0 auto;
    height: 100rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}
.orderDetail_pay text:nth-child(1) {
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
}
.orderDetail_pay text:nth-child(2) {
    /** 文本1 */
    font-size: 32rpx;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(255, 141, 26, 1);
}
.orderDetail_orderInfo {
    width: calc(100% - 60rpx);
    margin: 0 auto;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 25rpx;
    background-color: #fff;
}

.orderDetail_orderInfo_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.orderDetail_orderInfo_item text:nth-child(1) {
    width: 6em;
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
}
.orderDetail_orderInfo_item text:nth-child(2) {
    width: calc(100% - 6em);
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(51, 51, 51, 1);
}

.orderDetail_view {
    width: calc(100% - 60rpx);
    margin: 0 auto;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25rpx;
    background-color: #fff;
}
.orderDetail_view_title {
    /** 文本1 */
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 46.34rpx;
    color: rgba(51, 51, 51, 1);
}
.orderDetail_view_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.orderDetail_view_item text:nth-child(1) {
    width: 6em;
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
}
.orderDetail_view_item text:nth-child(2) {
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(153, 153, 153, 1);
}
.orderDetail_view_item text:nth-child(2) {
    width: calc(100% - 6em);
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(51, 51, 51, 1);
}

.orderDetail_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 172rpx;
    padding: 24rpx 30rpx 0 34rpx;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.orderDetail_footer .orderDetail_footer_left {
    width: calc(100% - 385rpx - 24rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 24rpx;
}
.orderDetail_footer .orderDetail_footer_left .more {
    /** 文本1 */
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 40.54rpx;
    color: rgba(153, 153, 153, 1);
    width: 4em;
}
.orderDetail_footer .orderDetail_footer_left .btn {
    margin: 0 !important;
    width: 197rpx;
    height: 80rpx;
}
.orderDetail_footer_right {
    width: 385rpx;
    height: 80rpx;
    margin-left: 24rpx;
}
.orderDetail_footer_right .btn {
    width: 100%;
    height: 100%;
    margin: 0 !important;
}
</style>
